<template>
  <div class="box">
    <Heads></Heads>
    <div class="shows">
      <ul class="nav">
        <li>
          <router-link to="/goods">商品</router-link>
        </li>
        <li>
          <router-link to="/ratings">评价</router-link>
        </li>
        <li>
          <router-link to="/seller">商家</router-link>
        </li>
      </ul>
      <div class="chu">
        <router-view></router-view>
      </div>
    </div>
    <div class="footer">
      <div
        :class="['iconfont icon-gouwuche-xuanzhong', { active: isLight }]"
        @click="dian(), dianLight()"
      ></div>
      <span>￥{{ getPrice }}</span>
      <p>另需配送费￥4元</p>
      <div @click="isBig" ref="song">￥20起送</div>
    </div>
    <div class="mask" v-show="isShow">
      <div class="mo" @click="dian(), dianLight()"></div>
      <div class="car">
        <div class="top">
          <p>购物车</p>
          <p @click="clearCar()">清空</p>
        </div>
        <div class="bottom">
          <ul>
            <li v-for="item in carList" :key="item.name">
              <p>{{ item.name }}</p>
              <div>
                <span>￥{{ item.price }}</span>
                <btn :item="item"></btn>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Heads from './View/Heads.vue'
import btn from './View/tab/btn.vue'
import { mapState , mapGetters} from 'vuex'
export default {
  data() {
    return {
      isShow: false,
      isLight: false,
    }
  },
  computed: {
    ...mapState(['carList']),
    ...mapGetters(['cartList']),
    
    getPrice() {
      let num = 0
      this.carList.forEach(item => {
        num += item.price * item.count
      })
      return num
    },
  },
  methods: {
    dian() {
      this.isShow = !this.isShow
    },
    dianLight() {
      this.isLight = !this.isLight
    },
    clearCar() {
      this.carList.splice(0);
    },
  },
  components: {
    Heads,
    btn,
  },
}
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}
.box {
  width: 100%;
  height: 667px;
  /* border: 1px solid black; */
  margin: 0 auto;
  position: relative;
}
.nav {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-around;
  line-height: 48px;
  background: #fff;
  border-bottom: 1px solid rgb(7, 17, 27, 0.1);
}
.nav > li > a {
  font-size: 18px;
  color: rgb(77, 85, 93);
}
.shows {
  width: 100%;
  flex: 1;
}
.shows .chu {
  height: 405px;
}
.footer {
  width: 100%;
  height: 80px;
  background: #141d27;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.footer > div:first-child {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: gray;
  font-size: 48px;
  position: absolute;
  left: 10px;
  bottom: 8px;
  line-height: 80px;
  text-align: center;
  z-index: 2;
}
.footer .active {
  color: deepskyblue;
  /* background: deepskyblue; */
}
.footer > div:last-child {
  width: 80px;
  height: 100%;
  font-size: 16px;
  color: rgb(255, 255, 255, 0.4);
  font-weight: 700;
  background-color: gray;
  line-height: 80px;
  text-align: center;
}
.footer > div:last-child .active {
  /* color: red; */
  background-color: orangered;
}
.footer > p {
  font-size: 14px;
  color: rgb(255, 255, 255, 0.4);
  font-weight: 500;
  margin-right: 16px;
}
.footer > span {
  font-size: 20px;
  color: rgb(255, 255, 255, 0.4);
  font-weight: 700;
  position: absolute;
  left: 90px;
  bottom: 24px;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 55px;
  left: 0;
  z-index: 1;

  /* display: none; */
}
.mo {
  width: 100%;
  height: 320px;
  background: rgba(7, 17, 27, 0.7);
}
.car {
  width: 100%;
  height: 324px;
  background: #fff;
}
.top {
  /* width: 80px; */
  height: 40xp;
  font-size: 14px;
  font-weight: 200;
  color: rgb(7, 17, 27);
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid rgb(7, 17, 27, 0.1);
  padding: 0 10px;
}
.top > p:last-child {
  font-size: 12px;
  color: rgb(0, 160, 220);
}
.bottom {
  height: 274px;
  overflow: auto;
}
.bottom > ul > li {
  height: 48px;
  line-height: 48px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(7, 17, 27, 0.1);
}
.bottom > ul > li > p {
  font-size: 14px;
  color: rgb(7, 17, 27);
}
.bottom > ul > li > div {
  display: flex;
  position: relative;
}
.bottom > ul > li > div > span {
  margin-right: 88px;
  font-size: 14px;
  color: red;
  font-weight: bold;
}
</style>
